<template>
  <div class="btn">
    <BtnUI
      :value="Text"
      @BtnCli="BtnClick"
      :maxLarge="maxLarge"
      :Large="Large"
      :minsmall="minsmall"
      :small="small"
      :fang="fang"
      :yuan="yuan"
      :banuyan="banuyan"
      :disabled="disabled"
      :color="color"
    ></BtnUI>
    <div style="margin-top:20px;margin-bottom:20px">
      <BtnUI value="超大" @BtnCli="BtnClick('maxLarge')"></BtnUI>
      <BtnUI value="大" @BtnCli="BtnClick('Large')"></BtnUI>
      <BtnUI value="小" @BtnCli="BtnClick('minsmall')"></BtnUI>
      <BtnUI value="极小" @BtnCli="BtnClick('small')"></BtnUI>
    </div>
    <div style="margin-top:20px;margin-bottom:20px">
      <BtnUI value="圆形" @BtnCli="changRadio('yuan')"></BtnUI>
      <BtnUI value="方形" @BtnCli="changRadio('fang')"></BtnUI>
      <BtnUI value="半圆" @BtnCli="changRadio('banuyan')"></BtnUI>
    </div>
    <div style="margin-top:20px;margin-bottom:20px">
      <BtnUI value="红色" @BtnCli="changColor('red')"></BtnUI>
      <BtnUI value="黄色" @BtnCli="changColor('yellow')"></BtnUI>
      <BtnUI value="蓝色" @BtnCli="changColor('blue')"></BtnUI>
      <BtnUI value="灰色" @BtnCli="changColor('gray')"></BtnUI>
    </div>
    <div style="margin-top:20px;margin-bottom:20px">
      <BtnUI value="禁用" @BtnCli="disable"></BtnUI>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Prop, Vue } from "vue-property-decorator";
import BtnUI from "../components/btn.vue";

@Component({
  components: { BtnUI }
})
export default class Home extends Vue {
  private Text: string = "click";
  // 按钮组大小
  private maxLarge: boolean = false;
  private Large: boolean = false;
  private minsmall: boolean = false;
  private small: boolean = false;
  // 按钮组形状
  private fang: boolean = false;
  private yuan: boolean = false;
  private banuyan: boolean = false;
  // 按钮禁用
  private disabled: boolean = false;
  private color: string = "";

  private BtnClick(name: string) {
    console.log(event)
    switch (name) {
      case "maxLarge":
        this.maxLarge = !this.maxLarge;
        this.Large = false;
        this.minsmall = false;
        this.small = false;
        return;
      case "Large":
        this.maxLarge = false;
        this.Large = !this.Large;
        this.minsmall = false;
        this.small = false;
        return;
      case "minsmall":
        this.maxLarge = false;
        this.Large = false;
        this.minsmall = !this.minsmall;
        this.small = false;
        return;
      case "small":
        this.maxLarge = false;
        this.Large = false;
        this.minsmall = false;
        this.small = !this.small;
        return;
      default:
        this.maxLarge = false;
        this.Large = false;
        this.minsmall = false;
        this.small = false;
        return;
    }
  }
  private changRadio(name: string) {
    switch (name) {
      case "yuan":
        this.yuan = !this.yuan;
        this.fang = false;
        this.banuyan = false;
        return;
      case "fang":
        this.banuyan = false;
        this.yuan = false;
        this.fang = !this.fang;
        return;
      case "banuyan":
        this.banuyan = !this.banuyan;
        this.fang = false;
        this.yuan = false;
        return;
      default:
        this.fang = false;
        this.yuan = false;
        this.banuyan = false;
        return;
    }
  }
  private disable() {
    this.disabled = !this.disabled;
  }
  private changColor(name:string){
    this.color=name
  }
}
</script>